<template>
  <div id="LARGE_SCREEN_MAP" class="large_screen_map_wrap">地图</div>
</template>

<script>
import { defineComponent, nextTick } from "vue";
import "./index.scss";
export default defineComponent({
  name: "LargeScreenMap",
});
</script>
<script setup>
import cityGeo from "./data/330000.json";

window.map = null;

// 初始化地图函数
const initMap = () => {
  window.map = new T.Map("LARGE_SCREEN_MAP");
  // 创建地图中心点实例
  let cenerLngLat = new T.LngLat(120.21781, 30.255328);
  // 设置地图中心点和地图缩放等级
  window.map.centerAndZoom(cenerLngLat, 11);
  console.log(map);
  window.map.setMapType(TMAP_HYBRID_MAP);

  // 创建marker
  let marker1 = new T.Marker(new T.LngLat(120.26548, 30.33295), {
    icon: new T.Icon({
      iconUrl: "http://47.92.246.66:1112/image/pt7.png",
      iconSize: new T.Point(80, 80),
    }),
  });

  marker1.addEventListener("click", (e) => {
    console.log(e);
  });
  marker1.data = {
    a: 1,
    b: 2,
  };

  // 添加marker
  window.map.addOverLay(marker1);

  initBorder();
};

const initBorder = () => {
  var bdary = cityGeo.features[0].geometry.coordinates[0][0];
  var pointArrays = new Array();
  for (var i = 0; i < bdary.length; i++) {
    var xyArr = bdary[i][0];
    var ptAr = bdary[i][1];
    pointArrays.push(new T.LngLat(xyArr, ptAr));
  }
  var border = new T.Polygon(pointArrays, {
    color: "#9cdcda",
    weight: 3,
    opacity: 1,
    fillColor: "#1f39a1",
    fillOpacity: 0.1,
  });
  //向地图上添加线
  window.map.addOverLay(border);
};

nextTick(() => {
  initMap();
});
</script>

<style lang="scss" scoped></style>
